<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Document</title>
    <base th:href="@{/}">
    <link rel="stylesheet" href="static/css/minireset.css"/>
    <link rel="stylesheet" href="static/css/common.css"/>
    <link rel="stylesheet" href="static/css/cart.css"/>
    <script src="static/script/vue.js"></script>
    <script src="static/script/axios.js"></script>
</head>
<body>
    <div id="cart-app">
        <div class="header">
            <div class="w">
                <div class="header-left">
                    <a href="index.html">
                        <img src="static/img/logo.gif" alt=""
                        /></a>
                    <h1>我的购物车</h1>
                </div>
                <!--<div class="header-right">-->
                <!--    <h3>欢迎<span th:text="${session.book_user.username}">张总</span>光临尚硅谷书城</h3>-->
                <!--    <div class="bookOrder"><a href="order?method=addOrder">我的订单</a></div>-->
                <!--    <div class="destory"><a href="index.html">注销</a></div>-->
                <!--    <div class="gohome">-->
                <!--        <a href="index.html">返回</a>-->
                <!--    </div>-->
                <!--</div>-->
                <div th:replace="cart/cart_right::cart_right"></div>
            </div>
        </div>
        <div class="list">
            <div class="w">
                <table>
                    <thead>
                        <tr>
                            <th>图片</th>
                            <th>商品名称</th>

                            <th>数量</th>
                            <th>单价</th>
                            <th>金额</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <!--如果购物车为空-->
                    <tr v-if="cartItems.length===0">
                        <td colspan="6" rowspan="5">
                            <h1>购物车空空如也, 请添加购物车,开始购物之旅吧~</h1>
                        </td>
                    </tr>
                    <tbody>
                        <tr v-for="item in cartItems">
                            <td>
                                <img :src="item.book.imgPath" alt=""/>
                            </td>
                            <td v-text="item.book.title">活着</td>
                            <td>
                                <span class="count" @click="subNum(item)">-</span>
                                <input class="count-num" type="text" v-model.number="item.count"/>
                                <span class="count" @click="addNum(item)">+</span>
                            </td>
                            <td v-text="item.book.price">36.8</td>
                            <td v-text="item.amount">36.8</td>
                            <td><a href="" @click.prevent="deleteItemByBookId(item.book.id)">删除</a></td>
                        </tr>
                    </tbody>
                </table>
                <div class="footer">
                    <div class="footer-left">
                        <a href="" class="clear-cart" @click.prevent="clearCart">清空购物车</a>
                        <a href="index.html">继续购物</a>
                    </div>
                    <div class="footer-right">
                        <div>共<span v-text="totalCount">3</span>件商品</div>
                        <div class="total-price">总金额<span v-text="totalAmount">99.9</span>元</div>
                        <a class="pay" href="order?method=addOrder">去结账</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom">
            <div class="w">
                <div class="top">
                    <ul>
                        <li>
                            <a href="">
                                <img src="static/img/bottom1.png" alt=""/>
                                <span>大咖级讲师亲自授课</span>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="static/img/bottom.png" alt=""/>
                                <span>课程为学员成长持续赋能</span>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="static/img/bottom2.png" alt=""/>
                                <span>学员真是情况大公开</span>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="content">
                    <dl>
                        <dt>关于尚硅谷</dt>
                        <dd>教育理念</dd>
                        <!-- <dd>名师团队</dd>
                        <dd>学员心声</dd> -->
                    </dl>
                    <dl>
                        <dt>资源下载</dt>
                        <dd>视频下载</dd>
                        <!-- <dd>资料下载</dd>
                        <dd>工具下载</dd> -->
                    </dl>
                    <dl>
                        <dt>加入我们</dt>
                        <dd>招聘岗位</dd>
                        <!-- <dd>岗位介绍</dd>
                        <dd>招贤纳师</dd> -->
                    </dl>
                    <dl>
                        <dt>联系我们</dt>
                        <dd>http://www.com.atguigu.com</dd>
                        <dd></dd>
                    </dl>
                </div>
            </div>
            <div class="down">
                尚硅谷书城.Copyright ©2015
            </div>
        </div>
    </div>

    <script>
        new Vue({
            el: "#cart-app",
            data: {
                totalCount: 0,
                totalAmount: 0,
                cartItems: []
            },
            methods: {
                async getCartItems() {
                    const {data: cartData} = await axios("/cart", {
                        baseURL: "http://localhost:8090/bookstore",
                        params: {
                            method: "getCartItems"
                        }
                    });
                    if (cartData.flag) {
                        this.cartItems = cartData.data.itemList;
                        this.totalCount = cartData.data.totalCount;
                        this.totalAmount = cartData.data.totalAmount;
                    } else {
                        alert("数据加载失败")
                    }
                },
                async updateNum(cartItem) {
                    // 数字校验
                    let reg_exp = /^[1-9][0-9]*$/;
                    let count = cartItem.count;
                    if (!reg_exp.test(count)) {
                        alert("请输如正整数!!!");
                        cartItem.count = 1;
                    }
                    const bookId = cartItem.book.id;
                    const {data} = await axios.get("/cart", {
                        baseURL: "http://localhost:8090/bookstore",
                        params: {
                            method: "updateCount",
                            bookId: bookId,
                            count: count
                        }
                    })
                    data.flag ? this.getCartItems() : alert("修改失败!!!!")
                },
                addNum(cartItem) {
                    cartItem.count++;
                    this.updateNum(cartItem)
                },
                subNum(cartItem) {
                    if (cartItem.count > 1) {
                        cartItem.count--;
                        this.updateNum(cartItem);
                    } else {
                        this.deleteItemByBookId(cartItem.book.id);
                    }
                },
                async deleteItemByBookId(bookId) {
                    if (!confirm("确认删除吗?")) return;
                    const {data: deleteResult} = await axios.get("/cart", {
                        baseURL: "http://localhost:8090/bookstore",
                        params: {
                            method: "deleteItemById",
                            bookId: bookId,
                        }
                    });
                    deleteResult.flag ? this.getCartItems() : alert("删除失败!!!!");
                },
                async clearCart() {
                    const {data} = await axios.get("/cart", {
                        baseURL: "http://localhost:8090/bookstore",
                        params: {
                            method: "clearCart"
                        }
                    })
                    data.flag ? alert("清空购物车成功!!!!") : alert("清空购物车失败~");
                    this.getCartItems();
                }
            },
            created() {
                this.getCartItems();
            }
        });
    </script>
</body>
</html>
